<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>HELLO，AMAP!</title>
    <script type="application/javascript" src="/js/jquery.min.js"></script>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <style>
        html, body, #container {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
        }
        #loadingTip {
            position: absolute;
            z-index: 9999;
            top: 0;
            left: 0;
            padding: 3px 10px;
            background: red;
            color: #fff;
            font-size: 14px;
        }
        .custom-content-marker {
            position: relative;
            width: 25px;
            height: 34px;
        }

        .custom-content-marker img {
            width: 100%;
            height: 100%;
        }

        .custom-content-marker .close-btn {
            position: absolute;
            top: -45px;
            right: -60px;
            width: 15px;
            height: 15px;
            font-size: 12px;
            background: #ccc;
            border-radius: 50%;
            color: #fff;
            text-align: center;
            line-height: 15px;
            box-shadow: -1px 1px 1px rgba(10, 10, 10, .2);
            z-index:3;
        }

        .custom-content-marker .close-btn:hover{
            background: #666;
        }
        .saleCount{
            font-weight: bold;
            color: red;
            text-align: center;
        }
    </style>
</head>

<body>
<div id="container"></div>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=2e6d9af820323c233ab5e1fe5339c7c9&plugin=AMap.DistrictSearch,AMap.Geocoder"></script>
<script type="text/javascript">
    //吉麦
    // --销售公司
    // -----经销商
    // -----服务站
    // -----二级经销商
    // -----------------车
    var center=[117.387243, 34.397172],socket,markers=[];
    // 创建地图实例
    var map = new AMap.Map("container", {
        zoom: 5,
        center: center,
        resizeEnable: true
    });
    var maps = new Map();
    setMarker('home','江苏吉麦新能源有限公司',10000,center,'00001');

    if (typeof (WebSocket) == "undefined") {
        console.log("您的浏览器不支持WebSocket");
    } else {
        console.log("您的浏览器支持WebSocket");
        //实现化WebSocket对象，指定要连接的服务器地址与端口  建立连接

        // var cid = document.getElementById("cid").value;
        var cid ="user-1";
        console.log("cid-->" + cid);
        var reqUrl = "http://localhost:8081/websocket/" + cid;
        socket = new WebSocket(reqUrl.replace("http", "ws"));
        //打开事件
        socket.onopen = function () {
            console.log("Socket 已打开");
            //socket.send("这是来自客户端的消息" + location.href + new Date());
        };
        //获得消息事件
        socket.onmessage = function (msg) {
            // center: [116.39, 39.92],
            console.log("onmessage--" + msg.data);
            let data = JSON.parse(msg.data);
            console.log("onmessage--" + data);
            console.log("onmessage--" + data.lon);
            console.log("onmessage--" + data.lat);
            // console.log("onmessage--" +map.toString());
            if (data.lon !=null  && data.lon!=undefined  && data.lat !=null  && data.lat!=undefined){
                // var map = new AMap.Map("container", {
                //     zoom: 13,
                //     center: [data.lon, data.lat],
                //     resizeEnable: true
                // });
                center=[data.lon, data.lat];
                map.setCenter(center);
                setMarker('saler',data.dealerName,600,center,data.companyId + "-"+ data.dealerId)

                //console.log("onmessage--" );
                // map.center = [data.lon, data.lat];
                //console.log("onmessage--" + map.center);
            }


            //发现消息进入    开始处理前端触发逻辑
        };
        //关闭事件
        socket.onclose = function () {
            console.log("Socket已关闭");
        };
        //发生了错误事件
        socket.onerror = function () {
            alert("Socket发生了错误");
            //此时可以尝试刷新页面
        }
    }

    /**
     *  清除标记
     * */
    function clearMarker(marker){

        var markersss = map.getAllOverlays('marker');
        for (var i = 0; i < markers.length; i++) {
            // debugger;
            var mar = markers[i];
            var ext=mar.getExtData();
            if (ext.id == marker) {
                map.remove(mar);
            }
        }
        // map.remove(maps.get(marker));
        // if (marker) {
        //     map.remove(marker);//清楚指定标记
        // }else{
        //     //清除所有标记
        //     // map.remove(markers[0]);
        //     markers[0].setMap(null);
        //     // markers.length=0;
        // }


    }

    /**
     * 设置标记
     *
     * imgPth：图标路径
     * content：图标内容
     * saleCount：销量
     *
     * */
    function setMarker(imgPth,content,saleCount,center,name){
        var centerMarker=new AMap.Marker({
            map:map,
            position: center,
            content:'<div class="custom-content-marker">' +
                '   <img attr="'+content+'" src="/icons/'+imgPth+'.png" style="width: 25px;height: 25px;">' +
                // '   <div class="close-btn" onclick="clearMarker('+centerMarker+')">X</div>' +
                '   <div class="close-btn" onclick="clearMarker('+"'"+name+"'"+')">X</div>' +
                //'   <div class="close-btn" >X</div>' +
                '</div>'
        });

        centerMarker.setLabel({
            content: "<div>" +
                "<div>"+content+"</div>" +
                "<div class='saleCount'>"+saleCount+"</div>" +
                "</div>", //设置文本标注内容
            direction: 'top' //设置文本标注方位
        });
        maps.set(name,centerMarker);
        markers.push(centerMarker);
        centerMarker.setExtData({
            id: name,
            saleInfoByCompany: name
        });
    }

    /**
     * 清除标记
     * */
    // $("body").on("click",".custom-content-marker",function(){
    //     console.log(this)
    //     map.remove(this);//清楚
    //
    // });

    function sendMessage() {
        if (typeof (WebSocket) == "undefined") {
            console.log("您的浏览器不支持WebSocket");
        } else {
            // console.log("您的浏览器支持WebSocket");
            var toUserId = document.getElementById('toUserId').value;
            var contentText = document.getElementById('contentText').value;
            var msg = '{"sid":"' + toUserId + '","message":"' + contentText + '"}';
            console.log(msg);
            socket.send(msg);
        }
    }

</script>
</body>

</html>